<template>
	<div>
		<vhead></vhead>
		
		<div class="container" style="margin-top: 70px;">
			<div class="row">
				<div class="col-sm-9 film-left">
					<div class="fl-head">
						<filmType :dataJson="filmType" @getId="regetId"></filmType>
						<filmType :dataJson="filmCountry" @getId="regetId"></filmType>
					</div>
					<listContent :dataJson="filmAll"></listContent>
				</div>
			</div>
		</div>
		
		<vfoot></vfoot>
	</div>
</template>

<script>
	import Vhead from "../public/VHead"
	import ListContent from "../public/ListContent"
	import FilmType from "../public/FilmType"
	import VFoot from "../public/VFoot"
	import Qs from 'qs'
	export default {
		data () {
		    return {
		    	filmType : [],
		    	filmAll : [],
		    	filmCountry : [],
		    	typeId : this.$route.params.typeId,
		    	countryId : this.$route.params.countryId
		    }
		},
		watch:{
	        typeId : function(newTypeId){
	        	this.init();
	        },
	        countryId : function(newCountryId){
	        	this.init();
	        }
	    },
		mounted ($route) {
	 		this.$nextTick(()=>{
	 			let _this = this;
	 			//获取所有电影的类型
	 			_this.$axios({
                    method: "post",
                    url: "http://www.qixiaocheng.cn/public/index.php/index/Filmtype/findAllFilmType",
                })
                .then(function(res) {
                	for(var i = 0;i<res.data.length;i++){
  						res.data[i]["id"] = res.data[i]["fId"];
  						res.data[i]["name"] = res.data[i]["name"];
  						res.data[i]["type"] = "typeId";
  					}
                	_this.filmType = res.data;
               	})
                .catch(function(err) {
                   console.log(err);
               	});
               	
               	//获取所有电影的城市
	 			_this.$axios({
                    method: "post",
                    url: "http://www.qixiaocheng.cn/public/index.php/index/Country/findAllCountry",
                })
                .then(function(res) {
                	for(var i = 0;i<res.data.length;i++){
  						res.data[i]["id"] = res.data[i]["countryId"];
  						res.data[i]["name"] = res.data[i]["countryname"];
  						res.data[i]["type"] = "countryId";
  					}
                	_this.filmCountry = res.data;
               	})
                .catch(function(err) {
                   console.log(err);
               	});
	 			_this.init();
	 		})
 		},
		components:{
			"vhead" : Vhead,
			"filmType" : FilmType,
			"vfoot" : VFoot,
			"listContent" : ListContent
		},
		methods : {
			regetId : function(val){
				let routerDate = {
					type:"all",
					countryId:"all"
				};
				if(val.type == "typeId"){
					routerDate.type = val.id;
				}
				else if(this.$route.params.typeId){
					routerDate.type = this.$route.params.typeId;
				}
				if(val.type == "countryId"){
					routerDate.countryId = val.id;
				}
				else if(this.$route.params.countryId){
					routerDate.countryId = this.$route.params.countryId;
				}
			  	this.$router.push({name: 'filmTwo',params:{ typeId:routerDate.type,countryId:routerDate.countryId}});
			  	this.typeId = this.$route.params.typeId;
			  	this.countryId = this.$route.params.countryId;
			},
			init : function(){
				let _this = this; 
	 			_this.filmAll = [];
	 			//获取所有电影
	 			let filmAllType = {
  					"fId":_this.typeId? _this.typeId : "all",
  					"countryId":_this.countryId? _this.countryId : "all",
  				}
        		_this.$axios({
	  				method:"post",
	  				data:Qs.stringify(filmAllType),
	  				url:"http://www.qixiaocheng.cn/public/index.php/index/Filmdetail/findFilmBySome",
	  			}).then(function(result){
					for(var i = 0;i<result.data.length;i++){
  						result.data[i]["imgUrl"] = 'http://www.qixiaocheng.cn/public/uploads/'+result.data[i]["filmImgUrl"] ;
  						result.data[i]["id"] = result.data[i]["filmId"];
  						result.data[i]["name"] = result.data[i]["filmName"];
  						result.data[i]["url"] = '/filmDetail/'+result.data[i]["filmId"];
  						_this.filmAll.push(result.data[i])
  					}
	  			});
			}
		}
	}
</script>

<style scoped>
	.film-left{
		border-left: 1px solid #dfdfdf;
		border-right: 1px solid #dfdfdf;
	    padding-bottom: 20px;
	}
	.fl-head{
		border-bottom: 1px solid #dfdfdf;
	}
</style>